<template>
  <div v-loading="loading" element-loading-background="rgba(255, 255, 255, 1)">
    <VFormRender 
      v-bind="$attrs" 
      ref="preForm" 
      @formChange="formChange" 
      :formData="initFormData"
      isArrayData
    ></VFormRender>
  </div>
</template>
<script setup>
import { defineExpose } from 'vue';
import formDesigner from '@common/form-designer';
// const createProps = formDesigner.getExportResource("src/form-designer/views/composables/pageLayout-form-render.js");
console.log('PROPS',formDesigner.getExportResource("src/form-designer/views/composables/pageLayout-form-render.js"));

// import { createProps, createEmits, usePagelayoutFormRender, useOverride } from './composables/pageLayout-form-render.js';
// const createEmits = formDesigner.getExportResource(
//   'src/form-designer/views/composables/pageLayout-form-render.js'
// );
const { usePagelayoutFormRender } = formDesigner.getExportResource(
  'src/form-designer/views/composables/pageLayout-form-render.js'
);
const { useOverride } = formDesigner.getExportResource(
  'src/form-designer/views/composables/pageLayout-form-render.js'
);
// vue2中通过无界调用vue3中的表单模板
defineOptions({
  name: 'PLFormRender'
});
const props =defineProps(formDesigner.getExportResource('src/form-designer/views/composables/pageLayout-form-render.js').createProps())

const emit = defineEmits(formDesigner.getExportResource('src/form-designer/views/composables/pageLayout-form-render.js').createEmits());
// const props = defineProps(createProps());
// const emit = defineEmits(createEmits());
console.log("🐷🐷🐷");
const { 
  preForm, 
  initFormData, 
  loading, 
  getFormData, 
  setFormData, 
  formChange, 
  disableWidgets, 
  hideWidgets, 
  enableWidgets, 
  getPageLayout, 
  containerObject
} = (useOverride || usePagelayoutFormRender)(
  props,
  emit
);

defineExpose({ getPageLayout, getFormData, setFormData, disableWidgets, hideWidgets, enableWidgets, initFormData, preForm, containerObject });
</script>
<style lang="scss">
.pageLayoutForm.render-form {
  &.readonly-mode-form {
    .container-wrapper {
      padding: 0;
    }
    .field-wrapper {
      padding: 2px 6px !important;
      .el-form-item {
        .el-form-item__label {
          color: #999;
          min-height: unset;
          // modify by lifs 2024/11/01 查看态样式行高调整
          line-height: 22px !important;
          > span {
            font-size: 12px;
            max-width: calc(100% - 15px);
            display: inline-block;
          }
        }
        .el-form-item__content {
          background: #fff;
          // modify by lifs 2024/11/01 查看态样式行高调整
          line-height: 22px;
          // modify by lifs 2025/5/20 查看态label与content对齐修复
          .readonly-mode-field {
            padding: 0 6px;
          }
          > span {
            vertical-align: baseline;
            div {
              display: inline;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              &.readonly-mode-date {
                display: none;
              }
            }
            // modify by lifs 2025/5/20 查看态label与content对齐修复
            .readonly-mode-field {
              display: inline;
              line-height: 22px;
              padding: 0 6px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .lifecycle_status {
              // modify by lifs 2024/09/26 修复查看态下布局组件生命周期条目的样式问题
              .ui-ty-breadcrumb {
                > span {
                  display: inline-block;
                  .ty-base-tag-wrap {
                    .el-tag.el-tag--default {
                      height: 18px;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .el-form-item.el-form-item--default.asterisk-left.label-right-align.label-wrap {
        display: flex;
        align-items: flex-start;
      }
      // modify by lifs 2024/11/14 查看态下富文本样式修改
      &.rich-editor-item-wrapper {
        .el-form-item {
          .el-form-item__content {
            .readonly-mode-field {
              white-space: normal;
            }
          }
        }
      }
    }
    .el-form-item {
      .el-form-item__content {
        // modify by lifs 2024/11/01 查看态样式行高调整
        line-height: 22px;
        padding: 0 !important;
        .el-card.card-container {
          .el-card__header {
            height: 40px;
          }
          .el-card__body {
            padding: 0 6px;
            display: flex;
            flex-wrap: wrap;
          }
        }
      }
    }
  }
  .container-wrapper {
    .field-wrapper {
      .el-form-item__content {
        > span {
          div {
            white-space: nowrap;
          }
          .readonly-mode-field {
            white-space: nowrap;
          }
        }
      }
    }
  }
  .field-wrapper {
    .el-form-item {
      .el-form-item__label {
        > span {
          font-size: 12px;
          max-width: calc(100% - 15px);
          display: inline-block;
        }
      }
    }
    .readonly-mode-field {
      display: flex;
      align-items: center;
      min-height: 18px;
      line-height: 18px;
      font-size: 12px;
      white-space: nowrap;
      box-sizing: border-box;
    }
  }
  &:not(.UAV) {
    .el-card {
      border: none;
    }
  }
}
</style>
